<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    :title="
      orderAir?.orderNature === 0
        ? '普通订单'
        : orderAir?.orderNature === 1
        ? '改期订单'
        : '退票订单'
    "
    :isDetail="true"
    bordered
    bodyStyle="background: rgb(243, 245, 249)"
  >
    <div style="width: 99%; margin: 5px auto">
      <!-- 顶部订单号 -->
      <div style="text-align: right; padding: 5px"> 订单号：{{ airOrder?.airOrderId }} </div>
      <!-- header -->
      <div style="background-color: white">
        <div style="display: inline-block; padding: 5px; width: 80%">
          <a-row>
            <!-- 原订单 改期订单显示 -->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 1"
                title="原订单"
                :value="orderAir?.changeOldOrderId"
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- 原订单 退票订单显示 -->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 2"
                title="原订单"
                :value="orderAir?.returnOldOrderId"
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- 预订人 普通订单 改期订单显示 -->
            <a-col>
              <a-statistic
                title="预订人"
                :value="orderAir.bookerName"
                style="margin-right: 20px"
                v-if="orderAir?.orderNature === 1 || orderAir?.orderNature == 0"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- 退票状态 退票订单显示 -->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 2"
                title="退票状态"
                :value="
                  orderAir.quitIsRuse === 2
                    ? '退票完成'
                    : orderAir.quitIsRuse === 3
                    ? '退票申请'
                    : '退票打回'
                "
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- 支付方式 普通订单 改期订单显示 -->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 1 || orderAir?.orderNature == 0"
                title="支付方式"
                :value="airOrder?.paymentName + '/' + airOrder?.paymentWay"
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- 申请时间 退票订单显示 -->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 2"
                title="申请时间"
                :value="orderAir.returnDate"
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- 状态 普通订单 改期订单显示-->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 1 || orderAir?.orderNature == 0"
                title="状态"
                :value="
                  airOrder?.status === 0
                    ? '无效订单'
                    : airOrder?.status === 1
                    ? '原始订单'
                    : '已出票订单'
                "
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
            <!-- pnr 普通订单 改期订单显示 -->
            <a-col>
              <a-statistic
                v-if="orderAir?.orderNature === 1 || orderAir?.orderNature == 0"
                title="PNR"
                :value="airOrder?.pnr"
                style="margin-right: 20px"
                valueStyle="font-size: small"
              />
            </a-col>
          </a-row>
        </div>
        <!-- 行程单按钮 -->
        <div style="float: right; height: 100%">
          <a-button
            type="primary"
            @click="showModal"
            class="buttenstyle"
            v-if="orderAir?.orderNature === 0 || orderAir?.orderNature === 1"
            >行程单</a-button
          >
        </div>
        <!-- 行程单内容 -->
        <a-modal
          style="width: 1000px"
          v-model:visible="visible"
          :title="
            orderAir?.orderNature === 0
              ? '普通订单行程单'
              : orderAir?.orderNature === 1
              ? '改期订单行程单'
              : '退票订单'
          "
          ok-text="确认"
          cancel-text="取消"
          @ok="hideModal"
        >
          <div v-for="(segments, index) in airOrder?.segments" :key="index" style="padding: 10px">
            <a-row type="flex" align="middle" justify="center">
              <a-col :span="8">订单号：{{ segments?.airOrderId }} </a-col>
              <a-col :span="8">预定时间：{{ orderAir?.reservedDate }} </a-col>
              <a-col :span="8"
                >订单来源：{{
                  airOrder?.fromType === 'other' ? '普通渠道订单（三方）' : '直销渠道订单'
                }}
              </a-col>
            </a-row>
            <a-row>
              <p style="width: 100%; border: 1px solid; margin: 0 auto; border-bottom: 0"
                >第一段行程｜{{ segments.carrierName }} ({{ segments.flightNum }})
                {{ segments.orgName }} {{ segments.tbuildOrg }} ——————{{ segments.dstName }}
                {{ segments.tbuildDst }}
              </p>
            </a-row>
            <p style="width: 100%; border: 1px solid; margin: 0 auto; border-bottom: 0"
              ><a-row>
                <a-col :span="6">出发时间：{{ orderAir?.deptDate }} </a-col>
                <a-col :span="6"
                  >舱位：{{
                    segments.classLevel === 'F'
                      ? '头等舱'
                      : segments.classLevel === 'C'
                      ? '公务舱'
                      : '经济舱'
                  }}
                </a-col>
                <a-col :span="6">经停：{{ segments.stopNum }}次 </a-col>
                <a-col :span="6"
                  >订单状态：{{
                    orderAir?.orderNature === 0
                      ? '普通订单'
                      : orderAir?.orderNature === 1
                      ? '改期订单'
                      : '退票订单'
                  }}
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="6">到达时间：{{ orderAir?.arriveDate }}</a-col>
                <a-col :span="6">机型：{{ segments.planeStyle }} </a-col>
                <a-col :span="6"
                  >餐食：{{ segments.mealFlag === '1' ? '有餐食' : '无餐食' }}
                </a-col>
                <a-col :span="6">出票时间：{{ airOrder?.outTicketDate }} </a-col>
              </a-row>
            </p>
            <a-row>
              <p style="width: 100%; border: 1px solid">
                退改签：<br /><br />
                {{ segments.specialRule }}</p
              >
            </a-row>
            <a-row
              ><p style="width: 100%">
                <a-descriptions
                  layout="vertical"
                  bordered
                  v-for="(passenger, index1) in airOrder?.passengers"
                  :key="index1"
                  :column="6"
                >
                  <a-descriptions-item label="旅客姓名">{{
                    passenger.passengerName
                  }}</a-descriptions-item>
                  <a-descriptions-item label="部门">{{ passenger.deptName }}</a-descriptions-item>
                  <a-descriptions-item label="登记证件">{{
                    passenger.certNum
                  }}</a-descriptions-item>
                  <a-descriptions-item label="票号">{{ orderAir?.ticketNum }}</a-descriptions-item>
                  <a-descriptions-item label="出票金额"
                    >¥{{ segments.salePrice }}</a-descriptions-item
                  >
                  <a-descriptions-item label="实退票款">{{}}</a-descriptions-item>
                  <a-descriptions-item label="费用总计" :span="6"
                    >¥{{ orderAir?.sumPrice }}</a-descriptions-item
                  >
                </a-descriptions>
              </p></a-row
            >
            <a-row>
              注意：<br />
              1若您在旅行地停留72小时以上，请最迟于航班起飞72小时前确认您的座位。<br />
              2国内航班请提前90分钟，国际航班请堤前3个小时到达机场，办理乘机和安检手续。请在航站楼办理登记（接机）如有问题请联系容服电话：(400-001-0066),祝您旅途愉快！
            </a-row>
          </div>
        </a-modal>
      </div>
      <!-- content -->
      <div style="margin-top: 5px; box-sizing: border-box">
        <!-- content 左边 -->
        <div style="width: 74%; float: left">
          <!-- 航班信息 -->
          <div>
            <a-card size="small" :bordered="false" title="航班信息">
              <div>
                <!-- 改期订单原订单信息 -->
                <div v-if="orderAir?.orderNature === 1">
                  <div v-for="(segment, index) in gqddAirOrder?.segments" :key="index">
                    <p>
                      <span
                        class="test"
                        style="background: url(/@/assets/images/21669008054_.pic.jpg) no-repeat"
                        >改期前</span
                      >
                    </p>
                    <p>
                      <span>{{ segment.carrierName }}</span>
                      <span>{{ '机型' + segment.planeStyle }}</span>
                      <span>{{ segment.deptDate }} </span>
                      <span>{{ segment.mealFlag === '1' ? '有餐食' : '无餐食' }} </span
                      ><span>{{ '服务商热线：400-7800-888' }}</span>
                      <br />
                      <span><a href="javascript:void(0);" @click="info">退改签说明</a> </span>｜
                      <span
                        ><a href="javascript:void(0);">行李额</a>
                        （免费手提8.0kg一件；免托运20kg。）</span
                      >
                    </p>
                    <div class="ticketStyle">
                      <a-row type="flex" justify="center">
                        <a-col :span="8">
                          <p
                            >{{ segment.deptTime }}
                            <br />
                            <br />
                            <br />
                            {{ segment.orgName + segment.tbuildOrg }}
                          </p>
                        </a-col>
                        <a-col :span="8">
                          <p
                            >{{ segment.flightNum }} <br /><SwapRightOutlined
                              :style="{ fontSize: '40px', color: '#08c' }"
                              v-if="segment.sequence === 'single'"
                            />
                            <SwapOutlined
                              :style="{ fontSize: '40px', color: '#08c' }"
                              v-if="segment.sequence === 'goback'"
                            />
                            <br />
                            {{
                              segment.classLevel === 'f'
                                ? '头等舱'
                                : segment.classLevel === 'c'
                                ? '公务舱'
                                : '经济舱' + ' ' + segment.agio
                            }}折
                          </p>
                        </a-col>
                        <a-col :span="8">
                          <p
                            >{{ segment.arriveTime }}
                            <br />
                            <br />
                            <br />
                            {{ segment.dstName + segment.tbuildDst }}
                          </p>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                  <a-divider />
                </div>
                <!-- 普通、改期、退票订单航班信息 -->
                <div v-for="(segment, index) in airOrder?.segments" :key="index">
                  <p>
                    <span class="test" v-if="orderAir?.orderNature === 0">第{{ index + 1 }}程</span>
                    <span class="test" v-if="orderAir?.orderNature === 1">改期至</span>
                    <span v-if="orderAir?.orderNature === 2"></span>
                  </p>
                  <p>
                    <span>{{ segment.carrierName }}</span>
                    <span>{{ '机型' + segment.planeStyle }}</span>
                    <span>{{ segment.deptDate }} </span>
                    <span>{{ segment.mealFlag === '1' ? '有餐食' : '无餐食' }} </span
                    ><span>{{ '服务商热线：400-7800-888' }}</span>
                    <br />
                    <span><a href="javascript:void(0);" @click="info">退改签说明</a> </span>｜
                    <span
                      ><a href="javascript:void(0);">行李额</a>
                      （免费手提8.0kg一件；免托运20kg。）</span
                    >
                  </p>
                  <div class="ticketStyle">
                    <a-row type="flex" justify="center">
                      <a-col :span="8">
                        <p
                          >{{ segment.deptTime }}
                          <br />
                          <br />
                          <br />
                          {{ segment.orgName + segment.tbuildOrg }}
                        </p>
                      </a-col>
                      <a-col :span="8">
                        <p
                          >{{ segment.flightNum }} <br /><SwapRightOutlined
                            :style="{ fontSize: '40px', color: '#08c' }"
                            v-if="segment.sequence === 'single'"
                          />
                          <SwapOutlined
                            :style="{ fontSize: '40px', color: '#08c' }"
                            v-if="segment.sequence === 'goback'"
                          />
                          <br />
                          {{
                            segment.classLevel === 'f'
                              ? '头等舱'
                              : segment.classLevel === 'c'
                              ? '公务舱'
                              : '经济舱' + ' ' + segment.agio
                          }}折
                        </p>
                      </a-col>
                      <a-col :span="8">
                        <p
                          >{{ segment.arriveTime }}
                          <br />
                          <br />
                          <br />
                          {{ segment.dstName + segment.tbuildDst }}
                        </p>
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <a-divider />
                <!-- 乘机人，票号，座位 -->
                <div v-for="(passengerSegment, index) in airOrder?.passengerSegments" :key="index"
                  ><div v-for="(passenger, index1) in airOrder?.passengers" :key="index1"
                    ><a-row>
                      <a-col>
                        <a-statistic
                          :value="passenger.passengerName"
                          style="margin-right: 80px"
                          valueStyle="font-size: small"
                        />
                      </a-col>
                      <a-col>
                        <a-statistic
                          v-if="orderAir?.orderNature === 2"
                          :value="
                            orderAir?.quitIsRuse === 2
                              ? '退票完成'
                              : orderAir.quitIsRuse === 3
                              ? '退票申请'
                              : '退票打回'
                          "
                          style="margin-right: 80px"
                          valueStyle="font-size: small"
                        />
                      </a-col>

                      <a-col>
                        <a-statistic
                          title="票号"
                          :value="orderAir?.ticketNum"
                          style="margin-right: 20px"
                          valueStyle="font-size: small"
                        />
                      </a-col>
                      <a-col>
                        <a-statistic
                          title="座位号"
                          :value="
                            passengerSegment.seatPosition === null
                              ? '未订座'
                              : passengerSegment.seatPosition
                          "
                          style="margin-right: 20px"
                          valueStyle="font-size: small"
                        />
                      </a-col>
                    </a-row>
                    <a-divider />
                  </div>
                </div>
              </div>
            </a-card>
          </div>
          <!-- 乘机人信息 -->
          <div style="margin-top: 10px">
            <a-card size="small" :bordered="false" title="乘机人信息" style="width: 100%">
              <a-descriptions
                v-for="(passenger, index) in airOrder?.passengers"
                :key="index"
                size="small"
                :column="3"
                :title="passenger.passengerName"
                layout="vertical"
                bordered
              >
                <a-descriptions-item label="证件类型">
                  {{ passenger.certType }}
                </a-descriptions-item>
                <a-descriptions-item label="证件号码">{{ passenger.certNum }}</a-descriptions-item>
                <a-descriptions-item label="有效期" />
                <a-descriptions-item label="国籍" />

                <a-descriptions-item label="证件姓名"
                  >{{ passenger.passengerName }}
                </a-descriptions-item>
                <a-descriptions-item label="手机号">
                  {{ passenger.telephone }}
                </a-descriptions-item>
                <a-descriptions-item label="邮箱">
                  {{ passenger.email }}
                </a-descriptions-item>
                <a-descriptions-item label="员工编号">
                  {{ passenger.accountNo }} </a-descriptions-item
                ><a-descriptions-item label="员工部门">
                  {{ passenger.deptName }}
                </a-descriptions-item>
                <a-descriptions-item label="费用承担部门">
                  {{ passenger.costDeptName }}
                </a-descriptions-item>
                <a-descriptions-item label="成本中心">
                  {{ passenger.costcenterName }}
                </a-descriptions-item>
                <a-descriptions-item label="项目编号" />
              </a-descriptions>
            </a-card>
          </div>
        </div>
        <!-- content右边 -->
        <div style="width: 25%; float: right">
          <!-- 普通订单、改期订单总金额 -->
          <div v-if="orderAir?.orderNature === 1 || orderAir?.orderNature === 0">
            <div v-for="(passenger, index) in airOrder?.passengers" :key="index">
              <a-card
                title="总金额"
                style="width: 100%"
                v-for="(passengerSegment, index1) in airOrder?.passengerSegments"
                :key="index1"
              >
                <template #extra>
                  <a-statistic
                    v-if="orderAir?.orderNature === 1"
                    valueStyle="font-size:8px;color: rgb(252, 56, 8)"
                    :precision="2"
                    :value="
                      passengerSegment.changeFee +
                      passengerSegment.upFee +
                      passengerSegment.tktTax +
                      passengerSegment.fuelTax +
                      passengerSegment.insurance
                    "
                    style="margin-right: 8px"
                    prefix="¥"
                  />

                  <a-statistic
                    v-if="orderAir?.orderNature === 0"
                    valueStyle="font-size:8px;color: rgb(252, 56, 8)"
                    :precision="2"
                    :value="
                      passengerSegment.salePrice +
                      passengerSegment.tktTax +
                      passengerSegment.fuelTax +
                      passengerSegment.insurance
                    "
                    style="margin-right: 8px"
                    prefix="¥"
                  />
                </template>
                <p>{{ passenger.passengerName }}</p>
                <p
                  ><a-row>
                    <a-col
                      ><a-statistic
                        v-if="orderAir?.orderNature === 1"
                        title="改期费"
                        valueStyle="font-size:8px"
                        :precision="2"
                        :value="passengerSegment.changeFee"
                        style="margin-right: 8px"
                        prefix="¥"
                      />
                    </a-col>
                    <a-col
                      ><a-statistic
                        v-if="orderAir?.orderNature === 1"
                        title="升舱费"
                        valueStyle="font-size:8px"
                        :precision="2"
                        :value="passengerSegment.upFee"
                        style="margin-right: 8px"
                        prefix="¥"
                      />
                    </a-col>

                    <a-col
                      ><a-statistic
                        v-if="orderAir?.orderNature === 0"
                        title="票价"
                        valueStyle="font-size:8px"
                        :precision="2"
                        :value="passengerSegment.salePrice"
                        style="margin-right: 8px"
                        prefix="¥"
                      />
                    </a-col>
                    <a-col
                      ><a-statistic
                        title="税费"
                        valueStyle="font-size:8px"
                        :precision="2"
                        :value="passengerSegment.tktTax + passengerSegment.fuelTax"
                        style="margin-right: 8px"
                        prefix="¥"
                      />
                    </a-col>
                    <a-col
                      ><a-statistic
                        title="保险"
                        valueStyle="font-size:8px"
                        :precision="2"
                        :value="passengerSegment.insurance"
                        style="margin-right: 8px; display: inline-block"
                        prefix="¥"
                      />
                    </a-col>
                  </a-row>
                </p>
                <p style="text-align: right">
                  <a-statistic
                    v-if="orderAir?.orderNature === 0"
                    valueStyle="font-size:8px;display:inline-block"
                    :precision="2"
                    :value="
                      passengerSegment.salePrice +
                      passengerSegment.tktTax +
                      passengerSegment.fuelTax +
                      passengerSegment.insurance
                    "
                    style="margin-right: 8px"
                    prefix="小计：¥"
                  />
                </p>
              </a-card>
            </div>
          </div>
          <!-- 本次预订节约统计 -->
          <div style="margin-top: 5px; position: relative" v-show="orderAir?.orderNature === 0">
            <a-card title="本次预订节约统计" :bordered="false">
              <div id="pie_main" style="width: 150px; height: 150px"> </div>

              <p
                v-for="(passengerSegment, index) in airOrder?.passengerSegments"
                :key="index"
                style="position: absolute; right: 5px; top: 30%; width: 46%"
                ><a-row>
                  <a-col>
                    <a-statistic
                      title="总全价"
                      :precision="2"
                      prefix="¥"
                      :value="orderAir?.sumPrice"
                      valueStyle="font-size:12px"
                    />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col>
                    <a-statistic
                      title="总票价"
                      :precision="2"
                      prefix="¥"
                      :value="
                        passengerSegment.salePrice +
                        passengerSegment.fuelTax +
                        passengerSegment.tktTax
                      "
                      valueStyle="font-size:12px"
                      style="margin-right: 5px"
                    />
                  </a-col>
                  <a-col>
                    <a-statistic
                      title="公布价"
                      :precision="2"
                      prefix="¥"
                      :value="passengerSegment.fcny"
                      valueStyle="font-size:12px"
                    />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col>
                    <a-statistic
                      title="节省"
                      :precision="2"
                      prefix="¥"
                      :value="
                    (passengerSegment.fcny + passengerSegment
.fuelTax + passengerSegment
.tktTax )-orderAir?.sumPrice! 
                  "
                      valueStyle="font-size:12px ;color:red"
                    />
                  </a-col>
                </a-row>
              </p>
            </a-card>
          </div>
          <!-- 预订时最低价 -->
          <div v-if="orderAir?.orderNature === 0"
            ><div
              style="margin-top: 5px"
              v-for="(segment, index2) in airOrder?.segments"
              :key="index2"
            >
              <a-card
                title="预订时最低价"
                style="width: 100%"
                v-for="(lowFlight, index) in segment.lowFlights"
                :key="index"
              >
                <!-- <span style="width: 33%"
                  >{{ segment.lowPrice === segment.salePrice ? '本航班' : lowFlight.flightnum }}
                </span>
                <span style="width: 33%">{{ segment.agio + '折' }}</span
                ><span style="width: 33%">{{ '¥' + segment.lowPrice }} </span> -->
                <a-row>
                  <a-col
                    ><a-statistic
                      valueStyle="font-size:8px"
                      :precision="2"
                      :span="4"
                      :value="
                        segment.lowPrice === segment.salePrice ? '本航班' : lowFlight.flightnum
                      "
                      style="margin-right: 100px"
                    />
                  </a-col>
                  <a-col
                    ><a-statistic
                      valueStyle="font-size:8px"
                      :precision="2"
                      :value="segment.agio + '折'"
                      style="margin-right: 18px"
                    />
                  </a-col>
                  <a-col
                    ><a-statistic
                      valueStyle="font-size:8px;color: rgb(252, 56, 8)"
                      :precision="2"
                      :value="segment.lowPrice"
                      prefix="¥"
                    />
                  </a-col>
                </a-row>
              </a-card>
            </div>
          </div>
          <!-- 退票订单应退总计 -->
          <div v-if="orderAir?.orderNature === 2">
            <div v-for="(passengerSegment, index3) in airOrder?.passengerSegments" :key="index3">
              <div v-for="(RefundAirOrder, index1) in refundAirOrder" :key="index1">
                <div v-for="(refundSegment, index2) in RefundAirOrder.refundSegments" :key="index2">
                  <div v-if="refundSegment.psid === passengerSegment.id">
                    <a-card
                      title="应退总计"
                      style="width: 100%"
                      v-for="(passenger, index) in airOrder?.passengers"
                      :key="index"
                    >
                      <template #extra>
                        <a-statistic
                          valueStyle="font-size:8px;color: rgb(252, 56, 8)"
                          :precision="2"
                          :value="
                            passengerSegment.salePrice +
                            passengerSegment.changeFee +
                            passengerSegment.upFee +
                            passengerSegment.tktTax +
                            passengerSegment.fuelTax +
                            passengerSegment.insurance -
                            refundSegment.amount -
                            refundSegment.serviceCharge
                          "
                          style="margin-right: 8px"
                          prefix="¥"
                        />
                      </template>
                      <p>{{ passenger.passengerName }}</p>
                      <p>
                        <a-row
                          ><a-statistic
                            title="实收金额"
                            valueStyle="font-size:8px"
                            value=" "
                            style="margin-right: 8px"
                        /></a-row>
                        <a-row>
                          <a-col
                            ><a-statistic
                              title="票价"
                              valueStyle="font-size:8px"
                              :precision="2"
                              :value="passengerSegment.salePrice"
                              style="margin-right: 8px"
                              prefix="¥"
                            />
                          </a-col>
                          <a-col
                            ><a-statistic
                              title="税费"
                              valueStyle="font-size:8px"
                              :precision="2"
                              :value="passengerSegment.tktTax + passengerSegment.fuelTax"
                              style="margin-right: 8px"
                              prefix="¥"
                            />
                          </a-col>
                          <a-col
                            ><a-statistic
                              title="保险"
                              valueStyle="font-size:8px"
                              :precision="2"
                              :value="passengerSegment.insurance"
                              style="margin-right: 8px; display: inline-block"
                              prefix="¥"
                            />
                          </a-col>
                        </a-row>
                      </p>
                      <p>
                        <a-row
                          ><a-statistic
                            title="应退金额"
                            valueStyle="font-size:8px"
                            value=" "
                            style="margin-right: 1px"
                        /></a-row>
                        <a-row>
                          <a-col
                            ><a-statistic
                              title="票价"
                              valueStyle="font-size:8px"
                              :precision="2"
                              :value="refundSegment.refundAmount"
                              style="margin-right: 8px"
                              prefix="¥"
                            />
                          </a-col>
                          <a-col
                            ><a-statistic
                              title="税费"
                              valueStyle="font-size:8px"
                              :precision="2"
                              :value="refundSegment.fuelTax + refundSegment.tktTax"
                              style="margin-right: 8px"
                              prefix="¥"
                            />
                          </a-col>
                          <a-col
                            ><a-statistic
                              title="保险"
                              valueStyle="font-size:8px"
                              :precision="2"
                              :value="refundSegment.insurance"
                              style="margin-right: 8px; display: inline-block"
                              prefix="¥"
                            />
                          </a-col>
                        </a-row>
                      </p>
                      <p style="text-align: right">
                        <span style="float: right"
                          ><a-row>
                            <a-col>
                              <a-statistic
                                valueStyle="font-size:8px;display:inline-block;color: rgb(252, 56, 8)"
                                title="退票手续费"
                                :precision="2"
                                :value="refundSegment.serviceCharge"
                                style="margin-right: 8px"
                                prefix="¥"
                              />
                            </a-col>
                            <a-col
                              ><a-statistic
                                valueStyle="font-size:8px;display:inline-block;color: rgb(252, 56, 8)"
                                title="应退款"
                                :precision="2"
                                :value="
                                  passengerSegment.salePrice +
                                  passengerSegment.changeFee +
                                  passengerSegment.upFee +
                                  passengerSegment.tktTax +
                                  passengerSegment.fuelTax +
                                  passengerSegment.insurance -
                                  refundSegment.amount -
                                  refundSegment.serviceCharge
                                "
                                style="margin-right: 8px"
                                prefix="¥"
                              />
                            </a-col>
                          </a-row>
                        </span>
                      </p>
                    </a-card>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, toRaw, h, onMounted, watch } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { OrderAir } from '/@/api/travelItinerary/model/airItineraryModel';
  import {
    Descriptions,
    Statistic,
    Row,
    Card,
    Modal,
    CardGrid,
    Divider,
    Col,
  } from 'ant-design-vue';
  import { SwapRightOutlined, SwapOutlined } from '@ant-design/icons-vue';

  import {
    getTicketInfoByOrderNo,
    getFlightTicketOrderByParamsByChangeOldOrderId,
    getFlightTicketRefundOrderDetailByOrderNumByairOrderNum,
  } from '/@/api/travelItinerary/airItineraryAPI';
  import { AirOrder } from '/@/api/travelItinerary/model/AirOrderModel';
  import { RefundAirOrder } from '/@/api/travelItinerary/model/RefundAirOrderModel';

  import * as echarts from 'echarts';

  export default defineComponent({
    components: {
      BasicDrawer,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Statistic.name]: Statistic,
      [Row.name]: Row,
      [Card.name]: Card,
      [Modal.name]: Modal,
      [CardGrid.name]: CardGrid,
      [Divider.name]: Divider,
      [Col.name]: Col,
      SwapRightOutlined,
      SwapOutlined,
    },

    setup() {
      let title = ref('');
      let orderAir = ref<OrderAir>();
      let airOrder = ref<AirOrder>();
      let gqdd = ref<OrderAir>();
      let refundAirOrder = ref<RefundAirOrder[]>();
      let gqddAirOrder = ref<AirOrder>();
      const visible = ref<boolean>(false);
      const load = ref<boolean>(false);

      const showModal = () => {
        visible.value = true;
      };
      const hideModal = () => {
        visible.value = false;
      };

      const [register] = useDrawerInner(async (data: OrderAir) => {
        airOrder.value = await getTicketInfoByOrderNo(toRaw(data).primevalInfoAirId);
        orderAir.value = data;
        if (orderAir.value.orderNature === 0) {
          load.value = true;
        }
        if (data.orderNature === 1) {
          gqdd.value = await getFlightTicketOrderByParamsByChangeOldOrderId(
            toRaw(data).changeOldOrderId,
          );
          gqddAirOrder.value = await getTicketInfoByOrderNo(gqdd.value.items[0].primevalInfoAirId);
        }
        if (data.orderNature === 2) {
          refundAirOrder.value = await getFlightTicketRefundOrderDetailByOrderNumByairOrderNum(
            toRaw(data).returnOldOrderId,
          );
        }
      });
      // console.log(airOrder.value);

      const TGQmessage = function () {
        let message = ref();
        for (let k in airOrder.value?.segments) {
          message.value = airOrder.value?.segments[k].specialRule;
        }

        return message.value;
      };

      const info = () => {
        Modal.info({
          title: () => '退改签说明',
          content: () => [h('p', TGQmessage())],
        });
      };
      const draw = function (sumPrice, qPrice) {
        type EChartsOption = echarts.EChartsOption;
        var chartDom = document.getElementById('pie_main') as HTMLElement;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;
        option = {
          legend: {
            bottom: '1%',
            left: 'center',
          },
          tooltip: { trigger: 'item' },
          series: [
            {
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
              label: { show: false, position: 'center' },
              labelLine: { show: false },
              type: 'pie',
              data: [
                {
                  value: qPrice.value - sumPrice.value,
                  name: '节省',
                },
                { value: sumPrice.value, name: '票价' },
              ],
            },
          ],
        };
        option && myChart.setOption(option);
      };
      onMounted(() => {});

      watch(
        () => load.value,
        () => {
          console.log(load.value);
          if (load.value) {
            const sumPrice = ref(orderAir.value?.sumPrice);
            const qPrice = ref();
            if (
              (airOrder.value?.segments[0].fcny !== undefined &&
                airOrder.value?.segments[0].tktTax !== undefined) ||
              airOrder.value?.segments[0].fuelTax !== undefined
            ) {
              qPrice.value =
                airOrder.value?.segments[0].fcny +
                airOrder.value?.segments[0].tktTax +
                airOrder.value?.segments[0].fuelTax;
            }
            if (orderAir.value?.orderNature === 0) {
              draw(sumPrice, qPrice);
            }
            load.value = false;
          }
        },
      );
      return {
        register,
        orderAir,
        title,
        airOrder,
        TGQmessage,
        info,
        refundAirOrder,
        gqddAirOrder,
        visible,
        showModal,
        hideModal,
        load,
      };
    },
  });
</script>
<style scoped>
  span {
    margin-right: 5px;
  }

  .buttenstyle {
    background-color: rgb(252, 56, 8);
    border: 0;
    margin-top: 35%;
    transform: translateY(-50%);
    margin-right: 15px;
  }

  .ticketStyle {
    width: 50%;
    border: 1px solid;
    border-radius: 30px;
    box-shadow: 2px 2px 5px #000;
    padding: 10px;
  }

  .test {
    height: 38px;
    background: url(/@/assets/images/WechatIMG1.png) no-repeat;
    width: 93px;
    display: inline-block;
    line-height: 38px;
    color: aliceblue;
    text-align: center;
  }
</style>
